<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-22 15:09:45
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:21:42
-->
<template>
  <div>
    <el-dialog
      title="新建批次"
      :visible.sync="dialog.putDrawerShow"
      width="895px"
      custom-class="dialogClass"
      @close="putDclose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="batchForm"
        ref="batchForm"
        :rules="batchRules"
        label-width="80px"
        :inline="false"
        size="normal"
        :label-position="labelPosition"
        v-if="dialog.putDrawerShow"
      >
        <div class="examination">
          <el-form-item label="考试名称" prop="name">
            <el-select
              v-model="batchForm.name"
              placeholder="请选择考试名称"
              style="width: 330px"
              @change="uploadChooise"
            >
              <el-option
                v-for="item in exmName"
                :key="item.id"
                :label="item.examinationName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试批次" prop="name2">
            <el-input
              v-model="batchForm.name2"
              style="width: 330px"
              placeholder="请输入批次名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="报名时间">
            <el-date-picker
              v-model="batchForm.value1"
              type="datetimerange"
              style="width: 330px"
              range-separator="至"
              start-placeholder="报名开始日期"
              end-placeholder="报名结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预计考试时间">
            <el-date-picker
              v-model="batchForm.value3"
              type="datetimerange"
              style="width: 330px"
              range-separator="至"
              start-placeholder="预计考试开始日期"
              end-placeholder="预计考试结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="chiooseRadio">
          <el-form-item class="radio">
            <span>是否允许个人报名</span>
            <el-radio v-model="batchForm.radio" label="1">是</el-radio>
            <el-radio v-model="batchForm.radio" label="2">否</el-radio>
          </el-form-item>
          <el-form-item class="radio">
            <span>是否需要缴费</span>
            <el-radio v-model="batchForm.radio3" label="1">是</el-radio>
            <el-radio v-model="batchForm.radio3" label="2">否</el-radio>
          </el-form-item>
          <el-form-item class="radio">
            <span>是否允许补考</span>
            <el-radio v-model="batchForm.radio4" label="1">是</el-radio>
            <el-radio v-model="batchForm.radio4" label="2">否</el-radio>
          </el-form-item>
        </div>
        <div class="ipt">
          <el-form-item
            label="终端缴费金额"
            v-if="batchForm.radio3 == 1"
            class="ipt-det"
          >
            <el-input
              v-model="batchForm.ipt"
              placeholder="请输入金额"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="同行缴费金额"
            v-if="batchForm.radio3 == 1"
            class="ipt-det"
          >
            <el-input
              v-model="batchForm.ipt1"
              placeholder="请输入金额"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="VIP缴费金额"
            v-if="batchForm.radio3 == 1"
            class="ipt-det"
          >
            <el-input
              v-model="batchForm.ipt2"
              placeholder="请输入金额"
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="使用区域" class="ipt-det">
            <el-cascader
              v-model="batchForm.ipt3"
              :options="areaList"
              :props="defaultParams"
              @change="handChange"
              placeholder="请选择适用区域"
              style="width: 330px"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="上传文件" class="ipt-det">
            <el-upload
              class="upload-demo"
              action="#"
              :on-change="handleChange"
              :file-list="fileList"
              :limit="1"
              :http-request="httpRequest"
              :on-remove="removeFile"
              style="width: 330px"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注信息" class="ipt-det">
            <el-input
              v-model="batchForm.ipt4"
              type="textarea"
              placeholder="请输入内容"
              style="width: 330px"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>

      <footer slot="footer">
        <el-button @click="dialog.putDrawerShow = false">取消</el-button>
        <el-button type="primary" @click="submit">修改</el-button>
        <el-button type="primary" @click="shelf">直接上架</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
import {
  putexamBatch,
  getqueryExam,
  getArea,
  getIncludFile,
} from "@/api/signUp";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerDate: {
      type: Object,
      required: true,
    },
    batchForm: {
      type: Object,
      required: true,
    },
    fileList: {
      type: Array,
    },
    fileName: {
      type: String,
    },
  },
  data() {
    return {
      areaList: [],
      // fileData: [],
      file: "",
      defaultParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
      },
      exmName: [],
      labelPosition: "top", //字段与表格的对齐方式
      batchRules: {
        name: [{ required: true, message: "请输入考试名称", trigger: "blur" }],
        name2: [{ required: true, message: "请输入考试批次", trigger: "blur" }],
        ipt: [
          { required: true, message: "请输入终端缴费金额", trigger: "blur" },
        ],
        ipt1: [
          { required: true, message: "请输入同行缴费金额", trigger: "blur" },
        ],
        ipt2: [
          { required: true, message: "请输入vip缴费金额", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getExamList();
    this.getAreaList();
  },
  methods: {
    uploadChooise(val) {
      getIncludFile({ examId: val }).then((res) => {
        if (res.data == 1) {
          this.uploadStatus = false;
        } else {
          this.uploadStatus = true;
        }
      });
    },
    // 直接上架
    shelf() {
      this.$refs.batchForm.validate(async (valid) => {
        if (!valid) return;
        let Obj = {
          batchName: this.batchForm.name2,
          examinationId: this.batchForm.name,
          areaId: this.batchForm.ipt3,
          enrollTime: this.batchForm.value1,
          examinationTime: this.batchForm.value3,
          terminalPrice: this.batchForm.ipt,
          peersPrice: this.batchForm.ipt1,
          memberPrice: this.batchForm.ipt2,
          remark: this.batchForm.ipt4,
          statusAllow: this.batchForm.radio,
          openState: 1,
          pay: this.batchForm.radio3,
          makeUp: this.batchForm.radio4,
          id: this.drawerDate.id,
          uploadName: this.fileName,
        };
        var fd = new FormData();
        fd.append("examBatch", JSON.stringify(Obj));
        fd.append("file", this.file);
        let res = await putexamBatch(fd);

        this.$message.success(res.msg);
        this.dialog.putDrawerShow = false;
        // this.$forceUpdate();
        this.$parent.getList();
        this.dialog.batchDrawer = false;
      });
    },
    removeFile(file) {
      if (this.$parent.fileList.length > 0 && file.status == "success") {
        this.fileName = "";
      }
    },
    putDclose() {
      this.dialog.putDrawerShowEject = false;
    },
    // 重置表单
    // resetForm() {
    //   this.batchForm = {
    //     ...defaltForm,
    //   };
    // },
    httpRequest(data) {
      this.file = data.file;
    },
    // 获取考试名称合集
    getExamList() {
      getqueryExam().then((res) => {
        this.exmName = res.rows;
      });
    },
    handleChange(file, fileList) {
      this.fileName = file.name;
    },
    // 获取所有地区
    getAreaList() {
      getArea().then((res) => {
        let data = res.data;
        this.areaList = this.getTreeData(data);
      });
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    handChange(e) {
      this.batchForm.ipt3 = e[1];
    },
    submit() {
      this.$refs.batchForm.validate(async (valid) => {
        if (!valid) return;
        let Obj = {
          batchName: this.batchForm.name2,
          examinationId: this.batchForm.name,
          areaId: this.batchForm.ipt3,
          enrollTime: this.batchForm.value1,
          examinationTime: this.batchForm.value3,
          terminalPrice: this.batchForm.ipt,
          peersPrice: this.batchForm.ipt1,
          memberPrice: this.batchForm.ipt2,
          remark: this.batchForm.ipt4,
          statusAllow: this.batchForm.radio,
          openState: 2,
          pay: this.batchForm.radio3,
          makeUp: this.batchForm.radio4,
          id: this.drawerDate.id,
          uploadName: this.fileName,
        };
        var fd = new FormData();
        fd.append("examBatch", JSON.stringify(Obj));
        fd.append("file", this.file);
        let res = await putexamBatch(fd);

        this.$message.success(res.msg);
        this.dialog.putDrawerShow = false;
        // this.$forceUpdate();
        this.$parent.getList();
        this.dialog.batchDrawer = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.examination {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.chiooseRadio {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    padding-left: 50px;
    .el-radio {
      margin-left: 10px;
    }
  }
}
/deep/ .el-form-item__label {
  padding-bottom: 5px;
}
.ipt {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    padding-left: 50px;
  }
}
</style>